<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

<xi:include href="master.html" />
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
    <title>SVM</title>
    <style type="text/css">
        input[type="text"]{width:30px;}
        #info{text-align:right;padding-left:50px;font-weight:bold;font-size:15px;}
        #maintable{width:100%;}
.spinner {
	position: absolute;
	opacity: 0.9;
	filter: alpha(opacity=90);
	z-index: 999;
	background: #fff;
}
.spinner-msg {
	text-align: center;
	font-weight: bold;
}

.spinner-img {
	background: url(static/images/spinner.gif) no-repeat;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}
    </style>
    <script type="text/javascript" src="static/javascript/webtoolkit.aim.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var svmcreated = ${1 if svm else 0};
    String.prototype.endsWith = function(str){return this.substr(this.length-str.length)==str;}
    function createsvm(){
        showSpinner();
        new Request.JSON({url:'createsvm',onSuccess:function(r){
            if (r.created){
                var s = '<p id="anninfo">A SVM is created with '+$('inputs').value
                +' inputs and '+$('outputs').value+' outputs.</p>';
                $('create').parentNode.innerHTML = s;
                svmcreated = 1;
                hideSpinner();
                alert("SVM created");
            }
        }}).get({'inputs':$('inputs').value, 'outputs': $('outputs').value});
    }
    function train(){
        if (!svmcreated){
            alert('You have to create a SVM first.');
            return;
        }
        showSpinner();
        new Request.JSON({url:'trainsvm',onSuccess:function(r){
            if (r.trained){
                alert('SVM trained.');
            }
            else{
                alert('You have to create a SVM first.');
            }
            hideSpinner();
        }}).get({'times':$('times').value});
    }
    function loadnet(){
        if (!svmcreated){
            alert('You have to create a SVM first.');
            return;
        }
        new Request.JSON({url:'loadsvm', onSuccess:function(r){
            if (r.loaded){
                alert('SVM configuration file loaded.');
            }
            else{
                alert('Failed to load selected SVM configuration file.');
            }
        }}).get({"nid": $('nets').get('value')});
    }
    function savenet(){
        if (!svmcreated){
            alert('You have to create a SVM first.');
            return;
        }
        new Request.JSON({url:'savesvm', onSuccess:function(r){
            if (r.saved){
                alert('SVM configuration saved.');
            }
            else{
                alert('Failed to save configuration file. Try again later.');
            }
        }}).get({'filename': $('netname').value});
    }
    function predict(pid){
        if (!svmcreated){
            alert('You have to create a SVM first.');
            return;
        }
        new Request.JSON({url:'predict', onSuccess:function(r){
            $('score').innerHTML = r.score.toString();
        }}).get({'pid':pid});
    }
    //]]>
    </script>
</head>
<?python
  # define mock menus as list of (title, url, is_active) tuples
  menu_top = [
    ('Home','/',False),
    ('Faces','/photofilter', False),
    ('ANN','/anntrainer', False),
    ('SVM','/svmtrainer', True)
  ]
  menu_side = [
    ('Official Website', 'http://www.turbogears.org'),
    ('Documentation', 'http://docs.turbogears.org'),
    ('Bugs & Suggestions', 'http://trac.turbogears.org'),
    ('Mailing List', 'http://groups.google.com/group/turbogears'),
  ]
?>
<body>
<h1>SVM trainer</h1>
    <table id="maintable">
        <tr>
            <td>
                <h2>Create SVM</h2>
                <form id="create" method="post" action="createann" onsubmit="createsvm(); return false;" py:if="not svm">
                    Create a Support Vector Machine with <input type="text" id="inputs" value="19" /> inputs and
                    <input type="text" id="outputs" value="1" /> outputs.
                    <input type="submit" value="Create" />
                </form>
                <p py:if="svm" id="anninfo">A SVM is created with ${svm.inputs if svm else 0} inputs and ${svm.outputs if svm else 0} outputs.</p>
            </td>
            <td id="predict">
                <h2>Test</h2>
                <a href="test">Run test set</a>
                
                <h2>Predict</h2>
                <form enctype="multipart/form-data" id="imgform" name="imgform" action="uploadimg" method="post">
        			<input name="image" id="uploadimg" type="file" size="12" /> <input type="submit" value="Upload" />
        		</form>
        		<div id="photo">
        		    <img py:if="photo" src="getpic?id=${photo.id}" width="200"/>
        		</div>
        		<div id="roi">
        		    <img py:if="photo" src="getroi?id=${photo.id}" />
        		</div>
        		<div id="score">
        		    <input py:if="photo" type="button" value="Predict" onclick="predict(${photo.id})"/>
        		</div>
            </td>
        </tr>
        <tr><td colspan="2">
            <h2>Load</h2>
                <form method="post" action="loadnet" onsubmit="loadnet(); return false;">
                    Load net: 
                    <select id="nets">
                        <option py:for="n in nets" value="${n.id}">${n.filename}</option>
                    </select>
                    <input type="submit" value="Load" />
                </form>
            </td>
        </tr>
        <!--tr><td colspan="2">
            <h2>Train</h2>
                <form method="post" action="train" onsubmit="train(); return false;">
                    Train <input type="text" id="times" value="1" /> times, now. <input type="submit" value="Train" />
                </form>
            </td>
        </tr-->
        <tr><td colspan="2">
            <h2>Save</h2>
                <form method="post" action="savenet" onsubmit="savenet(); return false;">
                    Save current SVM configuration with name <input id="netname" /><input type="submit" value="Save" />
                </form>
            </td>
        </tr>
    </table>
</body>
</html>
